<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/cookie.js"></script>
</head>

<body>
    <button class="set">设置cookie</button>
    <button class="get">获取cookie</button>
    
</body>
<script>
    // 使用cookie需要注意的问题:
    // (1) cookie不能跨网站 
    // (2) cookie不能跨浏览器
    // (3) cookie 的内容是纯文本，即只能保存字符串数据(键名和健值均是字符串类型,如果存储其他类型会隐式转字符串)。 
    //     如何存储复杂数据类型(数组和对象)? 
    //     存: 在把数组和对象存储到cookie之前, 先通过JSON.stringify()转化为JSON字符串,在存储
    //     取: 对应键名取值,在通过JSON.parse()方法将其解析为js对象(数组/对象)

    // (4) 有些浏览器在使用中文时，会出现乱码,对中文进行编码和解码处理
    //     存中文: 先将中文通过encodeURIComponent()进行编码,在存储
    //     取值:  对应键名取值,在通过decodeURIComponent()方法将其进行解码

    // (5) cookie 依赖于服务器环境


    // 如何存储复杂数据类型(数组和对象)?
    // 能否在保留数组和对象结构的情况下,将其转化为字符串(JOSN字符串)

    // JSON对象 (全局对象 window.JSON)
    // JSON.stringify()  接收一个数组/对象,在保留数组和对象结构的情况下,将其转化为字符串(JSON字符串)
    // JSON.parse()  接收一个JSON字符串,解析得到对应的数组和对象
    // console.log(JSON);





    var setBtn = document.getElementsByClassName("set")[0];
    var getBtn = document.getElementsByClassName("get")[0];

    setBtn.onclick = function () {
        console.log("存储cookie");

        setCookie("user", "张三", 7 * 24 * 60 * 60);
        setCookie("pwd", "123123", 30 * 60);
        setCookie("email", "123123@qq.com", 365 * 24 * 60 * 60);
        setCookie("phone", "17386141517");

        // var arr = [1,2,3];
        // var obj = {a:1,b:2};
        // // 错误演示
        // // setCookie("arr",arr);
        // // setCookie("obj",obj);
        // setCookie("arr",JSON.stringify(arr));
        // setCookie("obj",JSON.stringify(obj));
    }

    getBtn.onclick = function () {
        console.log(getCookie("user"));
        console.log(getCookie("pwd"));
        console.log(getCookie("phone"));
        console.log(getCookie("email"));

        // console.log(getCookie("arr"));
        // console.log(getCookie("obj"));

        // console.log(JSON.parse(getCookie("arr")));
        // console.log(JSON.parse(getCookie("obj")));
    }



</script>

</html>